<template>
    <div class="container">
        <div class="top">
            <p>角色管理</p>
            <el-button @click="refresh">刷新</el-button>
        </div>
        <div class="bottom">
            <div class="b_top">
                <p>数据列表</p>
                <span>
                    <el-button type="primary" plain @click="allStart">全部启用</el-button>
                    <el-button type="danger" @click="goDelRoles">删除全部禁用</el-button>
                    <el-button type="success text" @click="goAddRole">添加</el-button>
                </span>
            </div>
            <div class="b_bottom">
                <el-table ref="singleTable" :data="tableData" highlight-current-row border style="width: 100% ;">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column property="roleName" label="角色名称" width="200">
                    </el-table-column>
                    <el-table-column property="responsibility" label="职能描述" width="250">
                    </el-table-column>
                    <el-table-column property="member" label="人数" width="50">
                    </el-table-column>
                    <el-table-column property="createTime" label="创建时间" width="250">
                    </el-table-column>
                    <el-table-column label="是否启用" width="220">
                        <template slot-scope="scoped">
                            <el-switch :value="scoped.row.statusA == 0" @change="isStart(scoped.row.roleId)"
                                active-text="启用" inactive-text="禁用">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template v-slot="scoped">
                            <span class="operate" @click="goUpdateRole(scoped.row.roleId)">编辑</span>
                            <span class="operate" @click="goDelRole(scoped.row.roleId)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    name: 'RoleManage',
    data() {
        return {
            tableData: [],
        }
    },
    components: {

    },
    created() {
        // console.log(页面初始化);
        this.roleList();
    },
    methods: {
        ...mapActions('permission', ['RoleList', 'UpdateRole', 'DelRole', 'UpdateRoles']),
        roleList() {//页面初始化
            return this.RoleList().then((data) => {
                console.log(data);
                if (data.code == 200) {
                    this.tableData = data.data;
                } else {
                    this.$message(data.code, data.msg)
                }
            })
        },

        isStart(roleId) {//单个启用
            // console.log(roleId);
            let obj = this.tableData.find(item => {
                return item.roleId == roleId
            });
            // console.log(obj.statusA);
            obj.statusA = obj.statusA == 0 ? 1 : 0
            // console.log(data);
            this.UpdateRole(obj).then(res => {
                console.log(res);
            })
            // console.log(this.tableData);
        },

        allStart() {//全部启用
            let arr = [];
            this.tableData.forEach(item => {
                if (item.statusA == 1) { arr.push(item.roleId) }
            });
            this.tableData.forEach(item => {
                item.statusA = 0
            })
            this.UpdateRoles({ enable: arr })
        },

        goAddRole() {//跳转添加角色
            this.$router.push({
                path: '/home/Permission/AddRole'
            })
        },

        goUpdateRole(roleId) {//跳转角色编辑
            console.log(roleId);
            this.$router.push({
                path: '/home/Permission/UpdateRole',
                query: {
                    roleId: roleId
                }
            })
        },

        goDelRole(roleId) {//删除单个角色
            console.log(roleId);
            let idArr = [roleId]
            this.DelRole(idArr).then(res => {
                if (res.code == 200) {
                    // this.roleList();
                    this.tableData.forEach((item, index) => {
                        console.log();
                        if (item.roleId == roleId) {
                            this.tableData.splice(index, 1)
                        }
                    })
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                }
            })
        },

        goDelRoles() {//删除多个角色
            // console.log(1);
            let arr = [];
            this.tableData.forEach(item => {
                if (item.statusA == 1) { arr.push(item.roleId) }
            });


            this.DelRole(arr).then(res => {
                if (res.code == 200) {
                    this.roleList().then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    });
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                }
            })
        },

        refresh() {
            location.reload();
        }
    },
}
</script>

<style scoped>
::-webkit-scrollbar {
    display: none;
}

.container {
    height: inherit;
}

.top {
    background-color: #f0f0f0;
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding-right: 50px;
}

.top p {
    padding-left: 10px;
    margin-left: 20px;
    border-left: 6px solid #1CB09A;
    height: 26px;
    font-size: 18px;
    font-weight: 400;
}

.bottom {
    /* margin: 20px 50px; */
    margin: 20px auto;
    margin-bottom: 0;
    width: 96%;
    border: 2px solid #f0f0f0;
    padding: 0 30px;
    height: inherit;
    border-radius: 2px;
    /* padding-left: 10px; */
}

.b_top {
    display: flex;
    width: calc(100% + 60px);
    height: 50px;
    align-items: center;
    /* margin-left: -10px; */
    justify-content: space-between;
    margin-left: -30px;
    margin-bottom: 20px;
    font-size: 14px;
    background-color: #f0f0f0;
    padding: 30px;
    padding-left: 10px;

}

.b_top>span {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 500px;
}

.b_bottom {
    padding: auto;
}

.b_bottom>>>.cell {
    text-align: center;
}

.b_bottom>>>.operate {
    margin-right: 10px;
    border: 0;
}

.b_bottom>>>.operate:hover {
    color: rgb(76, 21, 215);
    text-decoration: underline;
}
</style>